<template>
  <el-form
    v-show="activeName === 'promptEngine'"
    ref="formRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="200px"
    class="form-box"
  >
    <el-form-item prop="system">
      <template #label>
        <div class="label-box">
          <div class="label">系统提示词</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                当LLM回答问题时，你需要LLM遵循的说明，比如角色设计、答案长度和答案语言等。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input
        v-model="form.system"
        :autosize="{ minRows: 4, maxRows: 6 }"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">相似度阈值</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                我们使用混合相似度得分来评估两行文本之间的距离。
                它是加权关键词相似度和向量余弦相似度。
                如果查询和块之间的相似度小于此阈值，则该块将被过滤掉。默认设置为
                0.2，也就是说文本块的混合相似度得分至少 20 才会被召回。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-slider
        v-model="form.similarity_threshold"
        :step="0.01"
        :min="0.0"
        :max="1.0"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">关键字相似度权重</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                我们使用混合相似性评分来评估两行文本之间的距离。它是加权关键字相似性和矢量余弦相似性或rerank得分（0〜1）。两个权重的总和为1.0。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-slider
        v-model="form.keywords_similarity_weight"
        :step="0.01"
        :min="0.0"
        :max="1.0"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">Top N</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                并非所有相似度得分高于“相似度阈值”的块都会被提供给大语言模型。
                LLM 只能看到这些“Top N”块。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-slider v-model="form.top_n" :step="1" :min="0" :max="30" />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">多轮对话优化</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                在多轮对话的中，对去知识库查询的问题进行优化。会调用大模型额外消耗token。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.refine_multiturn" />
    </el-form-item>
    <!-- <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">使用知识图谱</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                是否检索与所选知识库对应的知识图谱相关文本块，以处理复杂的多跳问题？这一过程将涉及对实体、关系和社区报告文本块的多次检索，会显著延长检索时间。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.useKnowledgeGraph" />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">推理</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                在问答过程中是否启用推理工作流，例如Deepseek-R1或OpenAI
                o1等模型所采用的方式。启用后，该功能允许模型访问外部知识，并借助思维链推理等技术逐步解决复杂问题。通过将问题分解为可处理的步骤，这种方法增强了模型提供准确回答的能力，从而在需要逻辑推理和多步思考的任务上表现更优。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="form.reasoning" />
    </el-form-item> -->
    <!-- <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">Rerank模型</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                非必选项：若不选择 rerank
                模型，系统将默认采用关键词相似度与向量余弦相似度相结合的混合查询方式；如果设置了
                rerank 模型，则混合查询中的向量相似度部分将被 rerank
                打分替代。请注意：采用 rerank 模型会非常耗时。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-select v-model="form.rerank_model" placeholder="请选择">
        <el-option label="模型1" value="model1" />
      </el-select>
    </el-form-item> -->
    <el-form-item>
      <template #label>
        <div class="label-box">
          <div class="label">变量</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                你可以通过对话 API，并配合变量设置来动态调整大模型的系统提示词。
                {knowledge}为系统预留变量，代表从指定知识库召回的文本块。
                “系统提示词”中的所有变量都必须用大括号{}括起来。详见
                https://ragflow.io/docs/dev/set_chat_variables。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-button class="add-btn" @click="handleAdd">新增</el-button>
      <el-table :data="tableData" stripe class="table-box">
        <el-table-column prop="key" label="关键字">
          <template #default="{ row }">
            <el-input v-model="row.key"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="optional" label="可选的" width="120">
          <template #default="{ row }">
            <el-switch v-model="row.optional" />
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="60">
          <template #default="{ $index }">
            <el-icon @click="handleDelete($index)"><Delete /></el-icon>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

const props = defineProps(["modelValue", "activeName", "addEdit"]);
const emits = defineEmits(["update:modelValue"]);

const formRef = ref();
const curPage = ref(1); // 当前页码

const rules = reactive({
  system: [{ required: true, message: "请输入", trigger: "blur" }],
});

const form = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});
const tableData = computed(() => {
  return form.value.variables.slice(
    (curPage.value - 1) * 10,
    curPage.value * 10
  );
});
const total = computed(() => {
  return form.value.variables.length;
});

const handleAdd = () => {
  form.value.variables.push({
    key: "",
    optional: false,
  });
};
const currentChange = (val) => {
  curPage.value = val;
};
const handleDelete = (index) => {
  form.value.variables.splice(index, 1);
};

defineExpose({
  formRef,
  form,
});
</script>

<style lang='scss' scoped>
.form-box {
  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
.label-box {
  display: flex;
  align-items: center;

  .label {
    margin-right: 4px;
  }
}
.tip-item {
  max-width: 200px;
}
.el-slider {
  padding-left: 8px;
}
.table-box {
  margin: 20px 0;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>